<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>精美的表格样式</title>
<style type="text/css">
<!--
body,table{
    font-size:12px;
    background:#fff;
}
table{
    table-layout:fixed;
    empty-cells:show; 
    border-collapse: collapse;
    margin:0 auto;
}
td{
    height:20px;
}
h1,h2,h3{
    font-size:12px;
    margin:0;
    padding:0;
}

.title { background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; }
    .title h1 { line-height: 31px; text-align:center;  background: #2F589C url(th_bg2.gif); background-repeat: repeat-x; background-position: 0 0; color: #FFF; }
        .title th, .title td { border: 1px solid #CAD9EA; padding: 5px; }


/*这个是借鉴一个论坛的样式*/
table#mytab{
    border:1px solid #e9e9e9;
    color:#666;
    width:260px;
}
table#mytab td, table#mytab thead th{
    border:1px solid #e9e9e9 !important;
    padding:0 1em 0;
    height:24px;
    line-height:24px;
}
table#mytab thead th {
    background-image: url(../style/default/bsm/images/t1-th-bg.jpg) !important;
    background-repeat::repeat-x !important;
    height:20px;
    line-height:20px;
    font-weight:400;
}
table#mytab tr.a1{
    background-color:#f1f6fc;
}
-->
</style>
<script type="text/javascript">
    function ApplyStyle(s){
        document.getElementById("mytab").className=s.innerText;
    }
</script>
</head>

<body>
<table id="mytab"  border="1" class="t1">
  <thead>
    <th width="50%">指标名称</th>
    <th>指标值</th>
  </thead>
    <tr>
    <td>指标1</td>
    <td>12</td>
  </tr>
  <tr class="a1">
    <td>指标X</td>
    <td>122</td>
  </tr>
  <tr>
    <td>指标1</td>
    <td>12</td>
  </tr>
  <tr class="a1">
    <td>指标2</td>
    <td>20</td>
  </tr>
  <tr>
    <td>指标3</td>
    <td>40</td>
  </tr>
  <tr class="a1">
    <td>指标4</td>
    <td>50</td>
  </tr>
  <tr>
    <td>指标5</td>
    <td>60</td>
  </tr>
</table>

</body>
</html>